<template>
  <div class="main">
    <ul>
      <Button type="primary" icon="ios-add-circle-outline">
        <router-link tag="div" to="/add">新增题目</router-link>
      </Button>
      <li class="item"
          v-for="(item,i) in subjectList"
          :key="item.id">
        <Button class="btn-add" type="round"
                @click="add(item)">加入试题车</Button>
        <h4>{{i+1}}.[{{item.type | fmtSubjectType}}]{{item.title}}</h4>
        <div style="color:#888;font-size:14px;padding:10px 0">{{item.author}}{{item.createTime}}</div>
        <fieldset style="padding:10px 0"
                  v-if="checkIsXZT(item.type)">
          <legend>选项</legend>
          <div v-for="(option,i) in item.options"
               :key="option.id">
            {{i | fmtOrder2ABC}}{{option.val}}
          </div>
        </fieldset>
        <div v-if="checkIsNotJDT(item.type)">
          答案：{{item.auswer}}
        </div>
        <div>
          解析：<Button type="info" @click="item.isOpen=!item.isOpen">{{item.isOpen?'收起':'展开'}}</Button>
          <div v-show="item.isOpen">
            {{item.desc}}
          </div>
        </div>
      </li>
    </ul>
    <router-link to='/cart'
                 tag="div"
                 class="subject-cart"> 试题车({{cartCount}}) </router-link>
  </div>

</template>

<script>
import { createNamespacedHelpers } from "vuex";
let { mapMutations, mapState, mapGetters } = createNamespacedHelpers("subject");
export default {
  computed: {
    ...mapState(["subjectList"]),
    ...mapGetters(["cartCount"])
  },
  async created() {
    let { subjectList } = await this.$get("/subjectlist");

    this.setSubjectList(subjectList);
  },
  methods: {
    add(item) {
      item.isSuccess = false;
      this.add2Cart(item);
      if (item.isSuccess) {
        this.$ms("添加成功");
      } else {
        this.$mw("请勿重新添加");
      }
    },
    ...mapMutations(["setSubjectList", "add2Cart"])
  }
};
</script>

<style lang='scss'>
.main {
  width: 1000px;
  margin: 100px auto;
  font-size: 16px;
}
li {
  list-style: none;
}
.item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.subject-cart {
  position: fixed;
  right: 0;
  width: 20px;
  padding: 10px;
  background: rgb(5, 136, 138);
  top: 50%;
  color: white;
  transform: translateY(-50%);
}
Button {
  outline: none;
  border: none;
}
.btn-add {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>